<template>
  <div>
    <!--  默认type为submit，当为submit时点击按钮后会将模态框关闭  -->
    <button type="button" class="btn btn-white btn-default btn-round" @click="selectFile()">
      <i class="ace-icon fa fa-cloud-upload"></i>
      {{ text }}
    </button>
    <input class="hidden" ref="file" type="file" v-on:change="uploadFile()" v-bind:id="inputId + '-input'"/>
  </div>
</template>

<script>
export default {
  name: "file",
  // 组件对外暴露可配置的属性
  props: {
    // 父组件中的回调文本和方法
    text: {
      default: "上传文件"
    },
    inputId: {
      default: "file-upload"
    },
    suffixs: {
      default: []
    },
    use: {
      default: ""
    },
    afterUpload: {
      type: Function,
      default: null
    }
  },
  data: function () {
    return {
    }
  },
  methods: {
    // 上传文件的方法
    uploadFile() {
      let _this = this;
      // key: "file"必须和后端controller参数名一致
      let formData = new window.FormData();
      let file = _this.$refs.file.files[0];

      // 判断文件格式
      let suffixs = _this.suffixs;
      // 得到文件的名称
      let fileName = file.name;
      // 通过文件名称获取到文件的类型
      let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
      // 定义初始的后缀校验变量，初始值为不能通过
      let validateSuffix = false;
      for (let i = 0; i < suffixs.length; i++) {
        // 因为文件格式后缀有大小写的区别，因此统一转为小写格式来进行判断
        if (suffixs[i].toLowerCase() === suffix) {
          // 如果校验通过则说明上传的文件为合法文件
          validateSuffix = true;
          break;
        }
      }

      if (!validateSuffix) {
        Toast.warning("文件格式不正确！支持上传的格式为：" + suffixs.join("，"));
        // 清空拦截到的文件对象
        $("#" + _this.inputId + "-input").val("");
        return;
      }

      // 获取到上传的文件
      formData.append('file', file);
      formData.append('use', _this.use);
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/file/admin/upload', formData).then((result) => {
        Loading.hide();
        let response = result.data;
        console.log("文件上传成功：", response);
        _this.afterUpload(response);
        // 在文件上传完成之后将控件中的值进行清空
        // 如果不进行清空值的话，将同一文件反复上传时不会触发change事件
        $("#" + _this.inputId + "-input").val("");
      });
    },

    selectFile() {
      let _this = this;
      // 触发一次点击事件
      $("#" + _this.inputId + "-input").trigger("click");
    },

  }
}
</script>
